<!--接口管理页面-->
<style>
    .grid-content {
        margin-bottom: 20px;
        min-height: 36px;
    }
</style>
<template>
    <div>
        <el-row>
            <el-button type="primary" @click="showAddForm">新增</el-button>
            <el-form :model="conditionForm" ref="conditionFormRef">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content "></div>
                    </el-col>
                    <el-col :span="2">
                        <el-select v-model="conditionForm.searchType" placeholder="请选择">
                            <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="conditionForm.keyword" auto-complete="off" placeholder="关键字" @keyup.enter.native="onSearch"></el-input>
                    </el-col>
                    <el-col :span="1">
                        <el-button plain icon="el-icon-search" @click="onSearch" >&nbsp;搜索</el-button>
                    </el-col>
                    <!--<el-col :span="1"></el-col>-->
                </el-row>
            </el-form>
        </el-row>
        <el-row class="margin-top-10">
            <el-col :span="5"><div class="grid-content bg-purple-dark">
                <!--:data="treeData"-->
                <!--:props="treeData"-->
                <el-tree
                        node-key="id"
                        :load="loadNode"
                        ref="tree"
                        lazy
                        show-checkbox>
                </el-tree>
                <div class="buttons">
                    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
                </div>
            </div></el-col>
            <el-col :span="19">
                <el-table :data="resultDate.data.list" stripe style="width: 100%">
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="serialNo" label="接口标识" width="100"></el-table-column>
                    <el-table-column prop="name" label="接口名称" width="100"></el-table-column>
                    <el-table-column prop="path" label="接口地址" width="100"></el-table-column>
                    <el-table-column prop="publicPath" label="对外发布地址" width="100"></el-table-column>
                    <el-table-column prop="serviceAddress" label="服务器地址" width="120"></el-table-column>
                    <el-table-column prop="port" label="端口" width="60"></el-table-column>
                    <el-table-column prop="protocol" label="接口协议" width="50" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="httpMethod" label="http请求方法" width="50"></el-table-column>
                    <el-table-column prop="invokMethod" label="WS调用方法" width="70"></el-table-column>
                    <el-table-column prop="apiType" label="接口类型" width="70" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="apiLocation" label="服务接口所在区域" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="scope" label="允许请求范围描述" width="100"></el-table-column>
                    <el-table-column prop="returnType" label="返回类型" width="50"></el-table-column>
                    <el-table-column prop="returnSample" label="返回结果示例" width="100"></el-table-column>
                    <el-table-column prop="serviceType" label="服务类别" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="businessType" label="业务类别" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="description" label="技术说明" width="100"></el-table-column>
                    <el-table-column prop="serviceArea" label="该服务对应的区域机构" width="100"></el-table-column>
                    <el-table-column prop="policeType" label="对应服务的警种类型" width="100"></el-table-column>
                    <el-table-column prop="providerId" label="提供者ID" width="100"></el-table-column>
                    <el-table-column prop="organization" label="管理单位名称" width="100"></el-table-column>
                    <el-table-column prop="status" label="状态" width="50" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="auditTime" label="审核时间" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="isOnline" label="是否上线" width="50" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="isDel" label="是否删除" width="50" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="createById" label="创建者标识" width="100"></el-table-column>
                    <el-table-column prop="modifiedTime" label="最后修改时间" width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="modifiedById" label="最后修改者ID" width="100"></el-table-column>

                    <el-table-column label="操作" width="450">
                        <template scope="scope">
                            <el-button size="small" @click="showUpdateForm(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                            <el-button size="small" @click="changeOnLineStatus(scope.row)" v-text="scope.row.isOnline==1?'下线':'上线'" />
                            <el-button size="small" @click="audit(scope.row,'yes')" :disabled="scope.row.status!=3?false:true">审核通过</el-button>
                            <el-button size="small" @click="audit(scope.row,'no')" :disabled="scope.row.status!=3?(scope.row.status==4?true:false):true" >审核不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
            <el-col :span="24" class="toolbar">
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                               :current-page="resultDate.data.pageNum"
                               :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                </el-pagination>
            </el-col>

            <!--新增界面-->
            <el-dialog title="新增接口" :visible.sync="dialogFormVisible" :before-close="handleClose" width="60%" :modal-append-to-body="false">
                <el-form :model="addForm" ref="addFormRef" :rules="formRules">
                    <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serialNo">
                        <el-input v-model="addForm.serialNo" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="addForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口地址" :label-width="formLabelWidth" prop="path">
                        <el-input v-model="addForm.path" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对外发布地址" :label-width="formLabelWidth" prop="publicPath">
                        <el-input v-model="addForm.publicPath" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="serviceAddress">
                        <el-input v-model="addForm.serviceAddress" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                        <el-input v-model="addForm.port" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口协议" :label-width="formLabelWidth" prop="protocol">
                        <el-radio-group v-model="addForm.protocol" >
                            <el-radio :label="1" border>标准协议</el-radio>
                            <el-radio :label="2" border disabled>自定义协议</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="接口类型" :label-width="formLabelWidth" prop="apiType" >
                        <el-radio-group v-model="addForm.apiType" @change="changeAddFormApiType">
                            <el-radio :label="1" border>http+json</el-radio>
                            <el-radio :label="2" border="">soap</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="http请求方法" :label-width="formLabelWidth" prop="httpMethod" v-if="addForm.apiType==1?true:false">
                        <el-radio-group v-model="addForm.httpMethod" >
                            <el-radio label="GET" border>GET</el-radio>
                            <el-radio label="POST" border>POST</el-radio>
                            <el-radio label="DELETE" border >DELETE</el-radio>
                            <el-radio label="UPDATE" border >UPDATE</el-radio>
                            <el-radio label="PUT" border >PUT</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="WS调用方法" :label-width="formLabelWidth" prop="invokMethod" v-if="addForm.apiType==2?true:false">
                        <el-input v-model="addForm.invokMethod" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务接口所在区域" :label-width="formLabelWidth" prop="apiLocation">
                        <el-input v-model="addForm.apiLocation" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="允许请求范围描述" :label-width="formLabelWidth" prop="scope">
                        <el-input v-model="addForm.scope" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回类型" :label-width="formLabelWidth" prop="returnType">
                        <el-input v-model="addForm.returnType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回结果示例" :label-width="formLabelWidth" prop="returnSample">
                        <el-input v-model="addForm.returnSample" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务类别" :label-width="formLabelWidth" prop="serviceType">
                        <el-input v-model="addForm.serviceType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="业务类别" :label-width="formLabelWidth" prop="businessType">
                        <el-input v-model="addForm.businessType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="技术说明" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="addForm.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="该服务对应的区域机构" :label-width="formLabelWidth" prop="serviceArea">
                        <el-input v-model="addForm.serviceArea" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对应服务的警种类型" :label-width="formLabelWidth" prop="policeType">
                        <el-input v-model="addForm.policeType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="提供者ID" :label-width="formLabelWidth" prop="providerId">
                        <el-input v-model="addForm.providerId" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="管理单位名称" :label-width="formLabelWidth" prop="organization">
                        <el-input v-model="addForm.organization" auto-complete="off"></el-input>
                    </el-form-item>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加请求参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="addFormParamInfosTab" v-model="addForm.paramInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数位置',key: 'position',width: 80,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '是否必须',key: 'isRequired',width: 80,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addParamInfoElement4AddForm()">添加参数</el-button>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加响应描述参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="addForm.responseInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addResponseInfoElement4AddForm()">添加响应描述参数</el-button>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addFormRef')">确 定</el-button>
                </div>
            </el-dialog>

            <!--编辑界面-->
            <el-dialog title="编辑接口" :visible.sync="updateFormVisible" width="60%" :before-close="handleClose" :modal-append-to-body="false">
                <el-form :model="updateForm" ref="updateFormRef" :rules="formRules">
                    <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serialNo">
                        <el-input v-model="updateForm.serialNo" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="updateForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口地址" :label-width="formLabelWidth" prop="path">
                        <el-input v-model="updateForm.path" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对外发布地址" :label-width="formLabelWidth" prop="publicPath">
                        <el-input v-model="updateForm.publicPath" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="serviceAddress">
                        <el-input v-model="updateForm.serviceAddress" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                        <el-input v-model="updateForm.port" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口协议" :label-width="formLabelWidth" prop="protocol">
                        <el-radio-group v-model="updateForm.protocol" >
                            <el-radio :label="1" border>标准协议</el-radio>
                            <el-radio :label="2" border disabled>自定义协议</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="接口类型" :label-width="formLabelWidth" prop="apiType">
                        <el-radio-group v-model="updateForm.apiType" @change="changeUpdateFormApiType">
                            <el-radio :label="1" border>http+json</el-radio>
                            <el-radio :label="2" border>soap</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="http请求方法" :label-width="formLabelWidth" prop="httpMethod"  v-if="updateForm.apiType==1?true:false">
                        <el-radio-group v-model="updateForm.httpMethod" >
                            <el-radio label="GET" border>GET</el-radio>
                            <el-radio label="POST" border>POST</el-radio>
                            <el-radio label="DELETE" border >DELETE</el-radio>
                            <el-radio label="UPDATE" border >UPDATE</el-radio>
                            <el-radio label="PUT" border >PUT</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="WS调用方法" :label-width="formLabelWidth" prop="invokMethod"  v-if="updateForm.apiType==2?true:false">
                        <el-input v-model="updateForm.invokMethod" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务接口所在区域" :label-width="formLabelWidth" prop="apiLocation">
                        <el-input v-model="updateForm.apiLocation" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="允许请求范围描述" :label-width="formLabelWidth" prop="scope">
                        <el-input v-model="updateForm.scope" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回类型" :label-width="formLabelWidth" prop="returnType">
                        <el-input v-model="updateForm.returnType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回结果示例" :label-width="formLabelWidth" prop="returnSample">
                        <el-input v-model="updateForm.returnSample" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务类别" :label-width="formLabelWidth" prop="serviceType">
                        <el-input v-model="updateForm.serviceType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="业务类别" :label-width="formLabelWidth" prop="businessType">
                        <el-input v-model="updateForm.businessType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="技术说明" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="updateForm.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="该服务对应的区域机构" :label-width="formLabelWidth" prop="serviceArea">
                        <el-input v-model="updateForm.serviceArea" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对应服务的警种类型" :label-width="formLabelWidth" prop="policeType">
                        <el-input v-model="updateForm.policeType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="提供者ID" :label-width="formLabelWidth" prop="providerId">
                        <el-input v-model="updateForm.providerId" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="管理单位名称" :label-width="formLabelWidth" prop="organization">
                        <el-input v-model="updateForm.organization" auto-complete="off"></el-input>
                    </el-form-item>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加请求参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.paramInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数位置',key: 'position',width: 80,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '是否必须',key: 'isRequired',width: 80,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addParamInfoElement4UpdateForm()">添加参数</el-button>



                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加响应描述参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.responseInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addResponseInfoElement4UpdateForm()">添加响应描述参数</el-button>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate('updateFormRef')">确 定</el-button>
                </div>
            </el-dialog>

        </el-row>


    </div>

</template>
<script>
    import canEditTable from './components/canEditTable.vue';
    import editButton from './components/canEditTable.vue';


    import {ser_searchByCondition, ser_add, ser_update, ser_del,ser_check,ser_changeOnLineStatus,dict_getRootListByType,dict_getSubNodeListByPid} from '../../api/api.js';
    import utils from '../api/utils.js';

    export default {
        components: {
            canEditTable
        },
        data() {
            return {
                resultDate: {pageNum: {}},
                dialogFormVisible: false,
                formLabelWidth: '155px',// 新增界面label大小
                addForm: {
                    apiType:'',
                    paramInfos: [],
                    responseInfos:[],
                },
                updateForm: {
                    paramInfos: [],
                    responseInfos:[],
                },// ---------  更新
                updateFormVisible: false,
                //表单校验规则
                formRules: { // 新增界面校验规则
                    serialNo: [
                        {required: true, message: '请输入接口标识', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入接口名称', trigger: 'blur'}
                    ],
                    path: [
                        {required: true, message: '请输入接口地址', trigger: 'blur'}
                    ],
                    publicPath: [
                        {required: true, message: '请输入对外发布地址', trigger: 'blur'}
                    ],
                    serviceAddress: [
                        {required: true, message: '请输入服务器地址', trigger: 'blur'}
                    ],
                    port: [
                        {required: true, message: '请输入端口', trigger: 'blur'}
                    ],
                    protocol: [
                        {required: true, message: '请选择接口协议', trigger: 'blur'}
                    ],
                    httpMethod: [
                        { required: false, message: '请选择http请求方法', trigger: 'blur' }
                    ],
                    invokMethod: [
                        { required: false, message: '请输入WS调用方法', trigger: 'blur' }
                    ],
                    apiType: [
                        {required: true, message: '请选择接口类型', trigger: 'blur'}
                    ],
                    apiLocation: [
                        {required: true, message: '请输入服务接口所在区域', trigger: 'blur'}
                    ],
//                    scope: [
//                        { required: true, message: '请输入允许请求范围的文字描述', trigger: 'blur' }
//                    ],
//                    returnType: [
//                        { required: true, message: '请输入返回类型', trigger: 'blur' }
//                    ],
//                    returnSample: [
//                        { required: true, message: '请输入返回结果示例', trigger: 'blur' }
//                    ],
//                    serviceType: [
//                        { required: true, message: '请输入服务类别', trigger: 'blur' }
//                    ],
//                    businessType: [
//                        { required: true, message: '请输入业务类别', trigger: 'blur' }
//                    ],
//                    description: [
//                        { required: true, message: '请输入技术说明', trigger: 'blur' }
//                    ],
//                    serviceArea: [
//                        { required: true, message: '请输入该服务对应的区域机构', trigger: 'blur' }
//                    ],
//                    policeType: [
//                        { required: true, message: '请输入对应服务的警种类型', trigger: 'blur' }
//                    ],
                    providerId: [
                        {required: true, message: '请输入提供者ID', trigger: 'blur'}
                    ],
//                    organization: [
//                        { required: true, message: '请输入管理单位名称', trigger: 'blur' }
//                    ],
                },
                // 查询条件
                conditionForm: {searchType: "", keyword: "", pageSize: 5 , policeType:"" },
                searchTypeOptions: [{
                    value: 'name',
                    label: '接口名称'
                }, {
                    value: 'serialNo',
                    label: '接口标识'
                }, {
                    value: 'organization',
                    label: '管理单位名称'
                }, {
                    value: 'all',
                    label: '全部',
                }],
                // 等待删除的业务对象：params  todo
                delParams:{},


                // 是否非第一次加载页面
                isNoFirstLoad:false,
            };
        },
        methods: {
            loadNode(node, resolve) {
                let _this = this
                if (node.level === 0) {// 第一次加载页面，树没数据就是==0
                    // dict_getRootListByType({"type":"jobCategory","isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });
                    resolve(utils.getDictDatasByType("jobCategory"))
                    return;
                }
                if(node.data.id>0){
                    // dict_getSubNodeListByPid({"pid":node.data.id,"isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });
                    resolve(utils.getDictDatasByPid(node.data.id))
                    return;
                }
            },
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？', "提示").then(_ => {
                    done();
                }).catch(_ => {
                });
            },
            submitForm(formName) { // 新增界面提交事件
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.paramInfos = params.paramInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                params.responseInfos = params.responseInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })
                console.log(params);

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            ser_add(params).then(res => {
                                console.log(res.data.msg);
                                this.$message.success(res.data.msg);
                                if (res.data.code == 'S100101') {
                                    this.addForm = {};
                                    this.onSearch();
                                }
                            }).catch(err => {
                                this.$message.error("系统异常");
                                console.log(err);
                            });
                            this.dialogFormVisible = false;
                        });
                    }
                });
            },
            // 查询
            onSearch(){
                var _this = this;


                if(this.isNoFirstLoad){// todo 这里把树里边的查询条件取出来 赋值到 policeType 传到后台
                    this.getCheckedNodes()
                    _this.conditionForm.policeType=this.$refs.tree.getCheckedKeys();
                }
                this.isNoFirstLoad=true;


                _this.conditionForm.pageNum = _this.currentPage;
                ser_searchByCondition(_this.conditionForm)
                    .then(res => {
                        _this.resultDate = res.data;
                    }).catch(function (error) {
                    console.log(error);
                    this.$message.warning('系统异常 ');
                });
            },
            getCheckedNodes() {// 该方法 目前只是打印功能
                console.log(this.$refs.tree.getCheckedNodes());
                console.log(this.$refs.tree.getCheckedKeys())
            },
            //删除
            handleDel (index, row) { // 数据项删除操作
                this.$confirm('是否删除当前该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ser_del(row.id).then((res) => {
                        if (res.data.code == 'S100101') {
                            this.$message.success('删除成功!');
                            this.onSearch();
                        } else {
                            this.$message.warning('删除失败! ' + res.data.msg);
                            this.onSearch();
                        }
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                })
            },
            showUpdateForm(index, row){
                this.updateForm = {};
                this.updateFormVisible = true;
                this.updateForm = Object.assign({}, row);//todo 需要删除子对象
                this.updateForm.paramInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.updateForm.paramInfos.pop();
                this.updateForm.responseInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.updateForm.responseInfos.pop();
            },
            showAddForm(){
                this.dialogFormVisible = true;
                this.addForm.paramInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.addForm.paramInfos.pop();
                this.addForm.responseInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.addForm.responseInfos.pop();
            },
            doUpdate(formName){
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.paramInfos = params.paramInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                params.responseInfos = params.responseInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            ser_update(params).then((res) => {
                                if (res.data.code == 'S100101') {
                                    this.$message.success('更新成功!');
                                    this.onSearch();
                                } else {
                                    this.$message.warning('更新失败! ' + res.data.msg);
                                    this.onSearch();
                                }
                            }).catch((res) => {
                                this.$message.error('更新失败!');
                            });
                            this.updateFormVisible = false;
                        });
                    }
                });
            },
            changeOnLineStatus(row){// 上下线
                ser_changeOnLineStatus({id:row.id}).then((res)=>{
                    if (res.data.code == 'S100101') {
                        this.$message.success(res.data.msg);
                        this.onSearch();
                    } else {
                        this.$message.warning('操作失败! ' + res.data.msg);
                        this.onSearch();
                    }
                }).catch((err)=>{
                    this.$message.error('操作失败!');
                    console.log('操作失败：'+err);
                });
            },
            audit(row,yesOrNo){// 审核
                let status ;
                if(yesOrNo=='yes'){
                    status=3;
                }else if(yesOrNo=='no'){
                    status=4
                }else{this.$message.error("异常操作!!!");return false;}
                ser_check({id:row.id,status:status}).then((res)=>{
                    if (res.data.code == 'S100101') {
                        this.$message.success(res.data.msg);
                        this.onSearch();
                    } else {
                        this.$message.warning('操作失败! ' + res.data.msg);
                        this.onSearch();
                    }
                }).catch((err)=>{
                    this.$message.error('审核失败!');
                    console.log('审核失败：'+err);
                });
            },
            formatCommDatas(row, column){
                return utils.formatCommDatas(row, column);
            },
            addParamInfoElement4AddForm(){// 新增表单-新增参数子对象
                this.addForm.paramInfos.push({});
                console.log(this.addForm)
                this.showAddForm();
                // todo  添加一行的时候应该进入编辑状态
//                editButton(this,this.render,this.addForm.paramInfos[this.addForm.paramInfos.length-1],this.addForm.paramInfos.length-1);//(vm, h, currentRow, index)  addFormParamInfosTab
            },
            addResponseInfoElement4AddForm(){// 新增表单-新增响应参数子对象
                this.addForm.responseInfos.push({});
                console.log(this.addForm)
                this.showAddForm();
            },
            addParamInfoElement4UpdateForm(){// 编辑表单-新增参数子对象
                this.updateForm.paramInfos.push({});
                console.log(this.updateForm)
            },
            addResponseInfoElement4UpdateForm(){// 编辑表单-新增响应参数子对象
                this.updateForm.responseInfos.push({});
                console.log(this.updateForm)
            },
            changeAddFormApiType(val){// 新增表单选择接口类型
                console.log(this.addForm.apiType);
                if(this.addForm.apiType==1){// http+json 清空另一种类型参数
                    this.addForm.invokMethod=null;
                    // 修改必填项
                    this.formRules.httpMethod[0].required=true;
                    this.formRules.invokMethod[0].required=false;
                }else if(this.addForm.apiType==2){// soap  清空另一种类型参数
                    this.addForm.httpMethod=null;
                    // 修改必填项
                    this.formRules.invokMethod[0].required=true;
                    this.formRules.httpMethod[0].required=false;
                }else{
                    this.$message.error("浏览器异常，请刷新页面")
                }
            },
            changeUpdateFormApiType(val){// 编辑表单选择接口类型
                console.log(this.updateForm.apiType);
                if(this.updateForm.apiType==1){// http+json 清空另一种类型参数
                    this.updateForm.invokMethod=null;
                    // 修改必填项
                    this.formRules.httpMethod[0].required=true;
                    this.formRules.invokMethod[0].required=false;
                }else if(this.updateForm.apiType==2){// soap  清空另一种类型参数
                    this.updateForm.httpMethod=null;
                    // 修改必填项
                    this.formRules.invokMethod[0].required=true;
                    this.formRules.httpMethod[0].required=false;
                }else{
                    this.$message.error("浏览器异常，请刷新页面")
                }
            },
        },
        computed: {
            // method1: function(){
            //     return  getCheckedNodes()
            // }
        },
        created() {

        },
        watch:{
            addForm(a,b){// 解决‘添加子对象’操作按钮不显示bug，重新刷新对象
                this.showAddForm();
            },
        },
        mounted(){
            this.onSearch();
        },



    };
</script>
 
 
